<template>
	<view>
		<form>
			<view class="cu-form-group">
				<view class="title">标题</view>
				<input placeholder="请输入标题" v-model="form.title" name="input"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">类型</view>
				<input @click="show=true" :disabled="true" placeholder="请选择类型" v-model="activeCategory.title"
					name="input"></input>
				<text class='cuIcon-right text-gray'></text>
			</view>
			<view class="cu-form-group">
				<view class="title">状态</view>
				<view class="flex-sub">
					<radio-group @change="RadioChange">
						<label class="margin-right-sm">
							<radio class="blue radio" value="0" :checked="form.status == 0"></radio>
							<text class="margin-lr-sm">隐藏</text>
						</label>
						<label class="margin-right-sm">
							<radio class="blue radio" value="1" :checked="form.status == 1"></radio>
							<text class="margin-lr-sm">舞台</text>
						</label>
						<label class="margin-right-sm">
							<radio class="blue radio" value="2" :checked="form.status == 2"></radio>
							<text class="margin-lr-sm">可售</text>
						</label>
					</radio-group>
				</view>
			</view>
			<view class="cu-form-group" v-if="form.status == 2">
				<view class="title">价格</view>
				<input placeholder="请输入价格" v-model="form.price" name="input" type="number"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">属性</view>
				<input placeholder="请输入属性" v-model="form.property" name="input"></input>
			</view>
			<view class="cu-bar bg-white solid-top">
				<view class="action title">
					图片
				</view>
				<view class="action">
					{{form.pic.length}}/9
				</view>
			</view>
			<view class="cu-form-group">
				<Upload v-model="form.pic" max="9"></Upload>
			</view>
			<view class="cu-bar bg-white solid-top">
				<view class="action title">
					详情
				</view>
			</view>
			<view class="cu-form-group">
				<textarea maxlength="-1" style="margin-top: 0;" v-model="form.content" placeholder="请输入详情"></textarea>
			</view>
		</form>
		<view class="foot-but-h"></view>
		<view class="foot-but">
			<view @click="onSubmit" class="cu-btn block bg-green lg">
				保存
			</view>
		</view>

		<view class="cu-modal bottom-modal" :class="show?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white">
					<view class="action">选择分类</view>
					<view class="action" @click="show=false">取消</view>
				</view>
				<scroll-view style="height: 35vh" scroll-y="true">
					<view class="cu-list menu solid-top">
						<view @click="clickItem(item)" class="cu-item" v-for="(item,index) in categorys" :key="index">
							<view class="content">
								<text :class="form.category_id == item.id ? 'text-green':'text-grey'">
									{{item.title}}
								</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import GoodsApi from "@/api/goods"
	import Upload from "../component/upload.vue"
	export default {
		components: {
			Upload
		},
		data() {
			return {
				form: {
					title: '',
					property: '',
					category_id: '',
					price: 0,
					status: 0,
					pic: [],
					content: '',
				},
				show: false,
				categorys: [],
				activeCategory: {},
			}
		},
		onLoad: function(option) {
			this.getCategory()
			if (option.id) {
				this.loadData(option.id);
			}
		},
		methods: {
			onSubmit() {
				let msg = '';
				if (!this.form.title) {
					msg = "请输入标题"
				} else if (!this.form.category_id) {
					msg = "请选择类型"
				} else if (!this.form.property) {
					msg = "请输入属性"
				} else if (this.form.status == 2 && !this.form.price) {
					msg = "请输入价格"
				} else if (this.form.pic.length < 1) {
					msg = "请上传图片"
				} else if (!this.form.content) {
					msg = "请输入详情"
				}
				if (msg) {
					uni.showToast({
						title: msg,
						icon: 'none'
					});
					return;
				}
				if (this.form.id) {
					GoodsApi.update(this.form).then(() => {
						this.onSuccess()
					})
				} else {
					GoodsApi.add(this.form).then(() => {
						this.onSuccess()
					})
				}
			},
			loadData(id) {
				GoodsApi.get(id).then((res) => {
					this.form = res
				})
			},
			onSuccess() {
				uni.showToast({
					title: "保存成功",
				});
				uni.navigateBack({
					delta: 1
				});
			},
			getCategory() {
				GoodsApi.category().then((res) => {
					this.categorys = res
				})
			},
			clickItem(item) {
				this.form.category_id = item.id;
				this.activeCategory = item;
				this.show = false;
			},
			RadioChange(e) {
				this.form.status = e.detail.value
			}
		}
	}
</script>

<style>

</style>
